<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<script src="js/jquery-1.11.3.min.js"></script>
<style type="text/css">
<!--
body {
	color:#000000;
	background-color:#B3B3B3;
	margin:0;
}
#container {
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
a img {
	border:none;
}

-->
</style>
</head>
<body>
<div id="container">
	<div id="new_user">
		User Name:<input type="text" id="username">
		Password:<input type="text" id="password">
		<input type="button" value="add user" id="adduser" />
		<input type="button" value="login as user" id="openuser" />
	</div>
	<h2>Users of demo realm</h2>
	<div id="user_list">
	</div>
	<h2>Demo Realm info</h2>
	<div id="realm_info">
	</div>
</div>
</body>
<script>
function loadUsers() {
	$.get("getusers.aspx", function(data){
		var str = "<ul>";
		for(var i in data) {
			var tmp = data[i];
			str += "<li id='"+tmp.id+"'>"+tmp.username+"</li>";
		}
		str += "</ul>";
		$("#user_list").html(str);
	});
}
function loadRealmInfo() {
	$.get("getRealmInfo.aspx", function(data){
		$("#realm_info").text(JSON.stringify(data));
	});
}
$(function(){
	$("#adduser").click(function(){
		var username = $("#username").val().trim();
		var password = $("#password").val().trim();
		if(!username || !password) {
			alert("please input!");
			return;
		}
		$.post("adduser.aspx", {
			'username': username,
			'password': password
		}).success(function(data){
			loadUsers();
		});
	});
	$("#openuser").click(function(){
		var username = $("#username").val().trim();
		var password = $("#password").val().trim();
		if(!username || !password) {
			alert("please input the user name and pwd!");
			return;
		}
		$.post("getuseraccesstoken.aspx", {
			'username': username,
			'password': password
		}).success(function(data){
			var token = data.access_token;
			window.open("jumpurl.aspx?url="
				+ encodeURI("http://localhost:8080/customer-portal/customers/view.jsp")
				+"&access_token="+encodeURI(token));
		});
	});
	loadUsers();
	loadRealmInfo();
});
</script>
</html>